<div>
  <div class="client-name">
    <span ng-if="client.value.os_info.value.fqdn">
      {$ client.value.os_info.value.fqdn.value $}
    </span>
    <span ng-if="!client.value.os_info.value.fqdn">
      {$ client.value.client_id.value $}
    </span>
  </div>
  <div class="approval-reason" ng-if="controller.approvalReason">
    Access reason: {$ controller.approvalReason $}
  </div>
  <div class="client-status">
    <!-- Output of the directives below depends on the current time (as
         they depend on the time *passed since* the time the client was last
         active. We have to refresh them every second, as Angular won't
         detect the changes automatically (since source value - last_seen_at -
         stays the same). -->
    <grr-periodic-refresh interval="1000">
      Status:
      <grr-client-status-icons client="client"></grr-client-status-icons>
      {$ (client.value.last_seen_at.value | grrTimeSince) $}
    </grr-periodic-refresh>
  </div>
  <span ng-if="controller.crashTime != null" class="last-crash">
    <strong>Last crash:</strong><br/>
    {$ (controller.crashTime | grrTimeSince) $}
  </span>
  <div class="client-ip-info">
    <img ng-if="controller.lastIP.status === 'UNKNOWN'" class="grr-icon-small vertical_aligned" src="/static/images/ip_unknown.png">
    <img ng-if="controller.lastIP.status === 'INTERNAL'" class="grr-icon-small vertical_aligned" src="/static/images/ip_internal.png">
    <img ng-if="controller.lastIP.status === 'EXTERNAL'" class="grr-icon-small vertical_aligned" src="/static/images/ip_external.png">
    <img ng-if="controller.lastIP.status === 'VPN'" class="grr-icon-small vertical_aligned" src="/static/images/ip_unknown.png">
    {$ controller.lastIP.info $}
  </div>

  <grr-client-warnings client="client"></grr-client-warnings>
</div>
